<template>
  <div class="disk_add">
    <ga-table
      row-key="id"
      :columns="columns"
      :data="tableData"
      :bordered="false"
      size="small"
      :hoverable="false"
      :pagination="false"
      style="background: #fff"
      :scroll="{ y: 220 }"
    >
      <template #use> 系统盘 </template>
      <template #type="{ record }">
        <ga-select size="small" v-model="record.type">
          <ga-option v-for="item in diskType" :key="item.value" :value="item.value">
            {{ item.label }}
          </ga-option>
        </ga-select>
      </template>
      <template #size="{ record }">
        <ga-input-number
          size="small"
          v-model="record.size"
          :style="{ width: '160px' }"
          hide-button
          :min="0"
        >
          <template #append>GB</template>
        </ga-input-number>
      </template>
      <template #action="{ rowIndex }">
        <ga-link
          status="danger"
          v-if="rowIndex > 0"
          :hoverable="false"
          @click="() => tableData?.splice(rowIndex, 1)"
        >
          移除
        </ga-link>
      </template>
    </ga-table>
    <div class="add_button" @click="tableData.push({ type: 'hdd', size: 0 })">
      + 添加磁盘
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineExpose } from "vue";
import { diskType } from "@/constant";
const tableData = ref([{ type: "hdd", size: 0 }]);
const emits = defineEmits(["handleSubmit"]);
defineExpose({});
const columns = [
  {
    title: "用途",
    slotName: "use",
    width: 120,
  },
  {
    title: "类型",
    dataIndex: "type",
    slotName: "type",
  },
  {
    title: "容量",
    dataIndex: "size",
    slotName: "size",
  },
  {
    title: "操作",
    width: 80,
    slotName: "action",
  },
];
</script>

<style lang="scss" scoped>
.add_button {
  border: 1px solid #e2e8f4;
  cursor: pointer;
  line-height: 32px;
  height: 32px;
  padding-left: 16px;
  color: #0f5ef7;
  background: #fff;
  margin-top: 4px;
}
</style>
